﻿define(function (require, exports, module) {
    var Canvas = require('util/canvas');
    var ImageStorage = require('util/imageStorage');
    var Config = require('util/config');

    var m_modifyButtonsOptions = [{
        id: 'decide',
        word: 'DECIDE_SELECTED_CHARACTER',
        y: 110
    }, {
        id: 'changeColor',
        word: 'CHANGE_CHARACTER_COLOR',
        y: 132
    }, {
        id: 'changeDirection',
        word: 'CHANGE_CHARACTER_DIRECTION',
        y: 154
    }, {
        id: 'cancel',
        word: 'DESELECT_CHARACTER',
        y: 176
    }];

    exports.renderAsync = eval(Wind.compile('async', function () {
        Canvas.clear();

        var bgLayer = Canvas.createLayer();
        var bgImage = $await(Canvas.createImageAsync({ image: Config.images.SELECT_CHARACTER_BG }));
        bgLayer.add(bgImage);
        Canvas.add(bgLayer);

        var operatingLayer = Canvas.createLayer();
        for (var i = Config.character.DOU_DING_GE; i <= Config.character.BI_JI_MEI; i++) {
            var image = Canvas.createImage({ id: i, name: 'character' });
            operatingLayer.add(image);
        }

        var tipText = Canvas.createText({ id: 'tipText', text: Config.words.SELECT_A_CHARACTER, x: 7, y: 459, fill: 'white', fontSize: 14 });
        operatingLayer.add(tipText);

        var backToRoleManagerImage = $await(Canvas.createImageWithBoxAnimationAsync({
            id: 'backToRoleManager', image: Config.images.BACK_2, x: 30, y: 366
        }));
        backToRoleManagerImage.on('mouseover', function () {
            tipText.setText(Config.words.BACK_TO_PREVIOUS);
        });
        backToRoleManagerImage.on('mouseout', function () {
            tipText.setText(Config.words.SELECT_A_CHARACTER);
        });
        operatingLayer.add(backToRoleManagerImage);

        var modifyGroup = Canvas.createGroup({ id: 'modifyCharacterGroup' });
        var modifyGroupBgImage = $await(Canvas.createImageAsync({ image: Config.images.MODIFY_CHARACTER_BG }));
        modifyGroup.add(modifyGroupBgImage);
        for (var i = 0, options; options = m_modifyButtonsOptions[i]; i++) {
            var rect = Canvas.createRectWithBoxAnimation($.extend({ x: 517, width: 71, height: 18 }, options));
            rect.on('mouseover', (function (word) {
                return function () {
                    tipText.setText(word);
                };
            })(Config.words[options.word]));
            rect.on('mouseout', function () {
                if (this.isVisible()) {
                    tipText.setText('');
                    operatingLayer.draw();
                }
            });
            modifyGroup.add(rect);
        }
        operatingLayer.add(modifyGroup);

        Canvas.add(operatingLayer);
    }));
});